<template>
  <div style="height: 32px; display: flex; align-items: center;">
    <a-checkbox
      @click="manualSelectorFieldPreviewChange"
      :checked="!!manual.manualSelectorFieldPreview">
      选择器字段可穿透
    </a-checkbox>
    <a-button
      @click="open"
      :icon="icon" v-if="!!manual.manualSelectorFieldPreview"
      shape="round">设置
    </a-button>

    <RelationViewConfigModal
      title="穿透视图设置" @ok="handleOK"
      :viewConfigs="manual.fieldViewConfigs"
      :form-definition="formDefinition"
      ref="RelationViewConfigModal"/>
  </div>
</template>
<script>
import {createProps} from '@/utils';
import {createManual} from '@comp/hhd/design/relation/types';
import {createFormDefinition} from '@comp/hhd/design/FormDesigner/types';
import RelationViewConfigModal from '@comp/hhd/design/relation/RelationViewConfigModal/RelationViewConfigModal.vue';

export default {
  name: 'RelationFieldViewConfig',
  components: {RelationViewConfigModal},
  props: {
    manual: createProps(Object, createManual),
    formDefinition: createProps(Object, createFormDefinition),
  },
  data() {
    return {};
  },
  methods: {
    open() {
      this.$refs.RelationViewConfigModal.setData(this.manual.fieldViewConfigs);
    },
    manualSelectorFieldPreviewChange() {
      this.manual.manualSelectorFieldPreview = !this.manual.manualSelectorFieldPreview;
      if (!this.manual.manualSelectorFieldPreview) {
        this.manual.fieldViewConfigs = [];
      }
    },
    handleOK(dataSource) {
      this.manual.fieldViewConfigs = dataSource;
    },
  },
  computed: {
    icon() {
      return this.manual && this.manual.fieldViewConfigs && this.manual.fieldViewConfigs.length && 'check' || undefined;
    },
  }
};
</script>